<template>
    <div>
        <ul>
            <li v-for="(item, index) in List" :key="index">
                <div class="top">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.names }}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                        <img :src="item.src" alt="">
                        <p>
                            <span>{{ item.money }}</span>
                            <span>{{ item.title }}</span>
                        </p>
                    </div>
                    <div class="right">
                        <img :src="item.img" alt="">
                        <p>
                            <span>{{ item.money }}</span>
                            <span>{{ item.title }}</span>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props:["List"],
    setup() {


        return {}
    }
})
</script>

<style scoped>
ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
}
ul li{
    width: 48%;
    height: 140px;
    border-radius: 15px;
    background-color: white;
    margin: 10px 0;
}
ul li .top{
    height: 30px;
    display: flex;
    align-items: center;
    margin-left: 20px;

}
.top p{
    height: 20px;
    background-color: #FD9B6E;
    color: white;
    border-radius: 4px;
}
li:nth-child(2) .top p{
    background-color: #ECA33C;
}
li:nth-child(3) .top p{
    background-color: #C3C838;
}
li:nth-child(4) .top p{
    background-color: #CFAD89;
}
li .bottom{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
li .bottom img{
    width: 80px;
    height: 80px;
}
li .bottom p{
    width: 70px;
    font-size: 14px;
    border: 1px solid #EEDDDA;
    border-radius: 6px;
    overflow: hidden;
    color: #EC8C7B;

}
li .bottom p span:first-child{
    display: inline-block;
    text-align: center;
    background-color: #E95C3B;
    color: white;
    width: 25px;
}
</style>